import React, { CSSProperties, MouseEventHandler, ReactNode, useEffect } from 'react';
import styles from './index.less';
import closeIcon from '@/assets/icons/icon-close-2.png';
import pub_btn from '@/styles/button.less';
import { Modal, Button, ModalProps } from 'antd';
import classNames from 'classnames';
import BaseModal from '../Modals/BaseModal';
import cn from "classnames";
export interface CusModalProps extends ModalProps {
  visible: boolean;
  title?: string | undefined | React.ReactNode;
  toggleModal: (bool: boolean) => void;
  handleOk?: () => void;
  handleCancel?: () => void;
  children?: ReactNode;
  okText?: string;
  cancelText?: string;
  footerHide?: boolean;
  modalWidth?: number | string;
  closable?: boolean;
  bodyStyle?: CSSProperties;
  loading?: any;
  loadingCancel?: any;
  style?: any;
  mask?: boolean;
  className?: any;
  maskClosable?: boolean;
  disabledOKBtn?: boolean;
  disabledCancelBtn?: boolean;
  leftFooter?: ReactNode; // 底部显示的html
}

const UploadFileModal = (props: CusModalProps) => {
  const {
    visible,
    title,
    bodyStyle,
    style,
    className,
    wrapClassName,
    modalWidth,
    closable,
    toggleModal,
    loading,
    leftFooter,
    handleOk,
    handleCancel,
    children,
    okText,
    cancelText,
    footerHide,
    mask = true,
    maskClosable,
    loadingCancel,
    disabledOKBtn,
    disabledCancelBtn,
  } = props;

  useEffect(() => {
   
  }, [visible]);


  return (

    <BaseModal
      title={title}
      wrapClassName={cn(styles.ratingModal,wrapClassName)}
      onCancel={() => toggleModal(false)}
      visible={visible}
      bodyStyle={bodyStyle}
      maskClosable={maskClosable || false}
      style={style}
      mask={mask}
      // getContainer={() => top?.parent.document.body}
      className={className}
      width={modalWidth || 800}
      closable={typeof closable === 'undefined' ? true : closable}
      closeIcon={<img className={styles.closeX} src={closeIcon} alt="X" />}
      footer={
        !footerHide && [
          <div className={styles.footer}>
            {leftFooter || <div></div>}
            <div>
              <Button
                key="submit"
                className={classNames(pub_btn.btn_red, styles.btn)}
                onClick={handleOk}
                loading={loading}
                disabled={disabledOKBtn}
              >
                {okText || '确认'}
              </Button>
              {
                disabledCancelBtn
                  ? <div className={styles.disabledBtn}>
                    <span>
                      {cancelText || '取消'}
                    </span>
                  </div>
                  : <Button
                    style={{ width: 80 }}
                    key="reset"
                    className={classNames(pub_btn.btn_border_red, pub_btn.btn_border_bold, disabledCancelBtn && styles.disabledBtn)}
                    loading={loadingCancel}
                    disabled={disabledCancelBtn}
                    onClick={() => {
                      if (handleCancel) {
                        handleCancel()
                      } else {
                        toggleModal(false)
                      }
                    }}
                  >
                    {cancelText || '取消'}
                  </Button>
              }

            </div>
          </div>,
        ]
      }
      modalContent={children}
    />
  );
};

export default UploadFileModal;
